<template>
  <!-- 查看物流单评价 -->
  <div class="logistic_list_evaluation">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="快递单评价"
      left-arrow
      @click-left="$router.go(-1)"
      :border="false"
      z-index="999"
    >
      <template #right>
        <van-icon name="wap-home-o" size="25" @click="$router.push('/home')" />
      </template>
    </van-nav-bar>

    <!-- 总体评分 -->
    <div class="totality">
      <div class="totality_top">总体评分</div>
      <div class="totality_centre">
        <span>{{ value * 2 }}</span>
        分
      </div>
      <div class="totality_bottom">
        <van-rate
          v-model="value"
          :icon="icon1"
          :void-icon="icon2"
          size="35px"
          gutter="28px"
          readonly
        />
      </div>
    </div>

    <!-- 各项评分 -->
    <div class="score">
      <ul>
        <li>店铺评分</li>
        <!-- 店铺评分 -->
        <li>
          <van-row>
            <van-col span="10">店铺评分</van-col>
            <van-col span="14">
              <van-rate
                v-model="val1"
                :size="25"
                color="#ffd15f"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </van-col>
          </van-row>
        </li>
        <!-- 物流速度 -->
        <li>
          <van-row>
            <van-col span="10">物流速度</van-col>
            <van-col span="14">
              <van-rate
                v-model="val2"
                :size="25"
                color="#fe8e5b"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </van-col>
          </van-row>
        </li>
        <!-- 快递评分 -->
        <li>
          <van-row>
            <van-col span="10">快递评分</van-col>
            <van-col span="14">
              <van-rate
                v-model="val3"
                :size="25"
                color="#fd5d5e"
                void-icon="star"
                void-color="#eee"
                readonly
              />
            </van-col>
          </van-row>
        </li>
      </ul>
    </div>

    <!-- 输入框 -->
    <div class="input_box">
      <van-field
        class="shurk"
        v-model="inputBox"
        rows="1"
        :autosize="{
          maxHeight: 200,
          minHeight: 200,
        }"
        type="textarea"
        placeholder="此用户没有填写评论"
        :border="false"
        readonly
      />

      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { ExamineLogisticsBillComment } from "@/request/api";
export default {
  data() {
    return {
      // 总体评分
      value: 4,
      // 总体评分-选中
      icon1: require("../assets/xiaolian.png"),
      // 总体评分-未选中
      icon2: require("../assets/shangxin.png"),

      // 店铺评分
      val1: 5,
      // 物流速度
      val2: 3,
      // 快递评分
      val3: 2,

      // 评论
      inputBox: "",
      // 文件上传
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],

      // 接收id
      id: "",
    };
  },
  created() {
    this.id = JSON.parse(this.$route.query.info);
    ExamineLogisticsBillComment(this.id).then((res) => {
      // console.log(res.data);
      // 总评分
      this.value = res.data.totalScore;
      // 快递评分
      this.val3 = res.data.express;
      // 物流速度
      this.val2 = res.data.logistics;
      // 店铺评分
      this.val1 = res.data.shop;
      // 评论内容
      this.inputBox = res.data.info;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.logistic_list_evaluation {
  /* 顶部导航 */

  .van-nav-bar {
    background-color: #003399;
  }

  /deep/.van-nav-bar__title,
  /deep/.van-icon,
  /deep/.van-nav-bar__text {
    color: #ffffff;
  }
  /* 总体评分 */
  .totality {
    background-color: #fff;
    padding-top: 0.15rem;
    padding-bottom: 0.2rem;
    .totality_top {
      text-align: center;
      font-size: 0.16rem;
      color: #aaaaaa;
    }
    .totality_centre {
      padding-top: 0.15rem;
      padding-bottom: 0.1rem;
      text-align: center;
      color: #ffcf41;
      span {
        font-size: 0.4rem;
      }
    }
    .totality_bottom {
      text-align: center;
    }
  }
  .score {
    padding: 0.1rem 20% 0.1rem 10%;
    background-color: #fff;
    margin-bottom: 0.2rem;

    li {
      border-radius: 0.05rem;
      line-height: 0.4rem;
      display: flex;
      justify-content: space-between;
      color: #333333;
    }
    .van-row {
      width: 100%;
    }
    /deep/.van-col {
      text-align: center;
    }
    .van-rate {
      vertical-align: middle;
    }
  }
}
</style>